import { Graph } from '@antv/g6';
import { useEffect } from 'react';

const data = {
  nodes: new Array(16).fill(0).map((_, i) => ({ id: `${i}` })),
  edges: new Array(15).fill(0).map((_, i) => ({ source: `${i}`, target: `${i + 1}` })),
};
console.log(data,"图表数据")
const Snake=()=>{
    useEffect(()=>{
        const graph = new Graph({
            container: 'sb_nake',
            autoFit: 'center',
            data,
            width:800,
            height:400,
            node: {
              style: {
                fill: '#d28b34',
                labelFill: '#fff',
                labelPlacement: 'center',
                labelText: (d) => d.id,
              },
            },
            layout: {
              type: 'snake',
              cols: 3,
              rowGap: 80,
              colGap: 120,
            },
            // 插件
            plugins:[
                {
                    type: 'background',
                    key: 'my-background', // 为插件指定标识符，方便动态更新
                    backgroundColor: '#f0f2f5', // 设置背景色
                    backgroundImage: 'url(https://example.com/bg.png)', // 设置背景图
                    zIndex:9,
                    opacity:0.5
                  },
            ],
            behaviors: ['drag-canvas', 'drag-element','grid-line'],
          });
          
          graph.render();
    },[])

    return (
        <div id="sb_nake" style={{width:"100%",height:"400px",border:"1px solid red"}}>Snake</div>
    )
}
export default Snake